<template>
	<div class="top">
		<h6>秒杀活动</h6>
		<div class="nav">
			<h4>秒杀活动列表</h4>
			<button @click="goto()" id="screening_one">添加活动</button>
		</div>
		<el-table class="top_title" :data="tableData" typeof="index">
			<el-table-column width="55">
				<input type="checkbox" name="01" checked="checked" class="front">
			</el-table-column>
			<el-table-column label="活动编号" width="120">
				<template #default="scope">
					<span>{{ scope.$index + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column label="活动标题" width="120">
				<template #default="scope">
					<span>{{ scope.row.title }}</span>
				</template>
			</el-table-column>
			<el-table-column label="活动封面" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.cover }}</span>
				</template>
			</el-table-column>
			<el-table-column label="活动状态" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.state }}</span>
				</template>
			</el-table-column>
			<el-table-column label="开始时间" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.end_tim}}</span>
				</template>
			</el-table-column>
			<el-table-column label="结束时间" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.start_tim }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip>
				<template #default="scope">
					<el-button size="small" class="but_view" @click="gotos()">课程设置</el-button>
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)" class="but_Modify">修改
					</el-button>
					<!-- <el-button size="small" @click="gotos()" class="but_Modify">修改</el-button> -->
					<!-- <button size="small" type="danger" @click="DelUsers(index) promCoupon()">删除</button> -->
					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
						class="but_delete">删除</el-button>
					<!-- <el-button @click="remove(scope.row.id)" title="删除" type="danger" size="mini" :disabled="scope.row.type == -1">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		
		
		<!-- 弹出层 -->
		<el-dialog v-model="dialogFormVisible" title="修改" id="Pop-up">
			<el-form>
				<el-form-item label="活动编号" :label-width="formLabelWidth" class="item">
					<el-input v-model="editObj.id" autocomplete="off" disabled />
				</el-form-item>
				<el-form-item label="活动标题" :label-width="formLabelWidth" class="item">
					<el-input v-model="editObj.title" autocomplete="off" />
				</el-form-item>
				<el-form-item label="活动封面" :label-width="formLabelWidth">
					<el-input v-model="editObj.cover" autocomplete="off" />
				</el-form-item>
				<el-form-item label="活动状态" :label-width="formLabelWidth">
					<el-input v-model="editObj.state" autocomplete="off" />
				</el-form-item>
				<el-form-item label="开始时间" :label-width="formLabelWidth" class="item">
					<el-input v-model="editObj.end_tim" autocomplete="off" />
				</el-form-item>
				<el-form-item label="结束时间" :label-width="formLabelWidth" class="items">
					<el-input v-model="editObj.start_tim" autocomplete="off" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="edit(edit_index, editObj)" class="but">确定</el-button>
					<el-button type="primary" @click="dialogFormVisible = false" class="but">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>


<script>
	import {
		ref,
	} from 'vue'
	import {
		promKill,
		delPromKill,
		editPromKill
	} from '../api/api.js'
	export default {
		name: 'cao',
		setup() {
			const tableData = ref([])

			const dialogFormVisible = ref(false)
			const formLabelWidth = '140px'
			const editObj = ref({})
			const edit_index = ref(0)
			return {
				tableData,
				dialogFormVisible,
				editObj,
				edit_index
			}
		},
		mounted() {
			this.promKill();
		},
		methods: {
			promKill() {
				promKill().then(res => {
					console.log(res);
					let _data = res.data.list;
					this.tableData = _data;
					console.log(this.tableData[0]);
				}).catch(err => {
					console.log(err);
				})
			},
			goto() {
				this.$router.push('/add')
			},
			gotos() {
				this.$router.push('/course')
			},
			handleDelete(index, row) {
				this.$emit('del', row);
				delPromKill(row)
					.then(res => {
						console.log(res)
						this.promKill()
					})
					.catch(err => {
						console.log(err)
					})
			},
			// handleDelete(index) {
			// 	console.log(index)
			// 	const serNum = this.tableData[index].kill_title
			// 	const _delete = { serNum }
			// 	console.log(_delete)
			// 	delPromKill(_delete)
			// 	.then(res => {
			// 		console.log(res)
			// 		this.promKill()
			// 	})
			// 	.catch(err => {
			// 		console.log(err)
			// 	})
			// },
			handleEdit(index, row) {
				//console.log(index, row)
				/* 
					index: 索引值
					row: 当前的数据
				*/
				this.dialogFormVisible = true;
				this.editObj = row;
				this.edit_index = index;
			},
			edit(index, row) {
				// console.log(row);
				// // this.tableData[index] = row;
				// console.log(this.tableData[index].id);
				//发送请求
				editPromKill(row)
					.then(res => {
						console.log(res);
						//调用重新渲染
						alert(res.data.msg);
					})
					.catch(err => {
						console.log(err);
					})
				this.dialogFormVisible = false;
			}
		}
	}
</script>
<style scoped>
	.page_ye {
		margin-left: 13px;
	}

	.front {
		width: 15px;
		height: 15px;
	}

	.select {
		margin-left: 20px;
		margin-right: 10px;
	}

	#travel {
		display: inline-block;
	}

	.footer_right>span {
		margin: 0 15px;
	}

	.pages {
		display: inline-block;
		margin-left: 10px;
		line-height: 20px;
		width: 90px;
		height: 20px;
	}

	.page {
		display: inline-block;
		margin-left: 10px;
		width: 40px;
		line-height: 20px;
		height: 20px;
		text-align: center;
		border: 1px solid;
	}

	.footer_left {
		width: 62%;
		height: 50px;
		line-height: 50px;
		float: left;
		background-color: white;
	}

	.footer_right {
		margin-top: -19px;
		line-height: 50px;
		background-color: white;
		width: 38%;
		height: 50px;
		float: right;
	}

	.nav>h4 {
		margin: 20px 0;
		display: inline-block;
	}

	* {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
	}

	.top {
		width: calc(100% - 60px);
		/* height: 100%; */
		padding: 35px 30px;
		background-color: #f0f0f0;
	}

	.top>.top_title {
		width: 100%;
		height: 100vh;
		margin: auto;
	}

	.top>. {
		width: 100%;
		height: 100px;
		margin: auto;
	}

	.nav {
		width: calc(100% - 60px);
		margin-top: 30px;
		padding: 0 30px;
		background-color: white;
		color: black;
		margin-bottom: 20px;
		overflow: hidden;
	}

	#screening_one {
		float: right;
		margin: 13px 25px;
		width: 80px;
		height: 40px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
		text-align: center;
		color: white;
	}
</style>
<style>
	@import "../assets/el-input.css";
</style>

